<template>
  <el-dropdown class="dropstyle">
    <span class="el-dropdown-link">
      图片展示类型
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="getdatabar">条形图</el-dropdown-item>
        <el-dropdown-item @click="getdatapie">饼图</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <div id="myChart" class="datastyle"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { getorderdata } from '@/api/orderdata.js'
import { ArrowDown } from '@element-plus/icons-vue'

const tabdata = ref([1, 2, 3])
const mdata = ref([1, 2, 3])
const getdatabar = async () => {
  var res = await getorderdata()
  tabdata.value = res.map((abj) => abj.lockclassname)
  mdata.value = res.map((abj) => abj.fee)
  console.log(tabdata.value)
  console.log(mdata.value)
  var myChart = echarts.init(document.getElementById('myChart'))
  myChart.clear()
  myChart.setOption({
    title: { text: '订单数据统计' },
    tooltip: {},
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      data: tabdata.value
    },
    yAxis: {},
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: mdata.value
      }
    ]
  })
}
const getdatapie = async () => {
  const peidatat = ref([])
  var res = await getorderdata()

  for (var i = 0; i < res.length; i++) {
    const peidata = ref({
      value: '',
      name: ''
    })
    peidata.value.name = res[i].lockclassname
    peidata.value.value = res[i].fee
    console.log(peidata.value.name)
    console.log(peidata.value.value)
    peidatat.value.push(peidata.value)
    //     console.log(peidatat.value)
  }
  console.log(peidatat.value)
  var myChart = echarts.init(document.getElementById('myChart'))
  myChart.clear()
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: peidatat.value
      }
    ]
  })
}
onMounted(() => {
  getdatabar()
})
</script>

<style lang="scss" scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.dropstyle {
  width: 200px;
  height: 30px;
}
.datastyle {
  width: 60%;
  height: 60%;
  margin-left: 25%;
  margin-top: 10%;
}
</style>
